<template>
  <div>
    <form class="layui-form zhzx-basInfo">
      <div class="layui-form-item">
        <label class="layui-form-label">用户名</label><input v-if="userInfo.userAccountUpdated !== '1'" lay-verify="required" type="text" v-model="userInfo.userAccount">
        <span style="line-height: 38px;" v-if="userInfo.userAccountUpdated === '1'">{{userInfo.userAccount}}</span>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-inline layui-upload">
          <span class="zhzx-basInfo-pho" v-if="userInfo.avatar">
            <!-- <img v-if="userInfo.avatar&&/^[0-9]$/.test(userInfo.avatar)" style="width: 102px;height: 102px;" :src="defaultAvatar" id="basInfoImg" class="layui-upload-img"> -->
            <!-- <img v-if="userInfo.avatar&&!/^[0-9]$/.test(userInfo.avatar)" style="width: 102px;height: 102px;" :src="userInfo.avatar" id="basInfoImg" class="layui-upload-img"> -->
            <img style="width: 102px;height: 102px;" :src="userInfo.avatar" id="basInfoImg" class="layui-upload-img">
          </span>
          <span class="zhzx-basInfo-pho-up">
            <button type="button" id="infoUp">上传</button>
            <p>要求上传图片清晰、健康 请勿使用二维码，最大2M</p>
          </span>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">介绍</label>
        <textarea placeholder="请输入" v-model="userInfo.comment"></textarea>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">真实姓名</label><input type="text" v-model="userInfo.realName">
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block zhzx-basInfo-sex">
          <input v-model="userInfo.gender" type="radio" name="sex" value="男" checked="" title="先生">
          <input v-model="userInfo.gender" type="radio" name="sex" value="女" title="女士">
        </div>
      </div>
      <div class="layui-form-item zhzx-basInfo-area">
        <label class="layui-form-label">所在城市</label>
        <div class="layui-input-inline">
          <select name="pro" v-model="userInfo.province" lay-filter="province" @change="change()">
            <option value="">请选择省份</option>
            <option :value="index" v-for="(item, index) in division" :key="index">{{index}}</option>
          </select>
        </div>
        <div class="layui-input-inline">
          <select name="city" v-model="userInfo.city" lay-filter="city">
            <option value="">请选择城市</option>
            <template v-if="userInfo.province">
              <option :value="index" v-for="(item, index) in division[userInfo.province]" :key="index">{{index}}</option>
            </template>
          </select>
        </div>
        <div class="layui-input-inline">
          <select name="district" v-model="userInfo.district" lay-filter="district">
            <option value="">请选择区</option>
            <template v-if="userInfo.city">
              <option :value="item" v-for="(item, index) in division[userInfo.province][userInfo.city]" :key="index">{{item}}</option>
            </template>
          </select>
        </div>
      </div>
      <div class="layui-form-item zhzx-basInfo-phone">
        <label class="layui-form-label">手机号</label>
        <span class="zhzx-basInfo-modi-con">{{userInfo.phone||'暂无'}}</span>
        <a v-if="userInfo.phone" href="javascript:void(0)" class="zhzx-basInfo-modi" onclick="changePhoneNum()">修改</a>
        <a v-if="!userInfo.phone" href="javascript:void(0)" class="zhzx-basInfo-modi" onclick="bindPhoneNum()">绑定手机号</a>
      </div>
      <div class="layui-form-item zhzx-basInfo-phone">
        <label class="layui-form-label">邮箱</label>
        <span class="zhzx-basInfo-modi-con">{{userInfo.email||'暂无'}}</span>
        <a v-if="userInfo.email" href="javascript:void(0)" class="zhzx-basInfo-modi" onclick="changeEmail()">修改</a>
        <a v-if="!userInfo.email" href="javascript:void(0)" class="zhzx-basInfo-modi" onclick="bindEmail()">绑定邮箱</a>
      </div>
      <button class="zhzx-basInfo-modi-but" @click="saveInfo()">保存</button>
    </form>
  </div>
</template>
<script>
import division from '@/utils/division'
import * as api from '@/service/api'
import { mapState } from 'vuex'
import $ from 'jquery'
export default {
  data () {
    return {
      loading: false,
      division: division,
      defaultAvatar: '',
      defaultImg: ''
    }
  },
  created () {
  },
  computed: {
    ...mapState({
      userInfo: state => Object.assign({}, state.me.user)
    })
  },
  watch: {
    userInfo () {
      if (this.userInfo.avatar) {
        this.defaultAvatar = `static/img/avatar${this.userInfo.avatar}.png`
        this.defaultImg = 'static/img/avatar1.png'
      }
    }
  },
  mounted () {
    this.defaultAvatar = `static/img/avatar${this.userInfo.avatar}.png`
    this.defaultImg = 'static/img/avatar1.png'
    let that = this
    window.layui.use(['form'], function () {
      let form = window.layui.form
      // 监听提交
      form.on('select(province)', function (data) {
        that.userInfo.province = data.value
        let areaHtml = '<option value="">请选择城市</option>'
        for (let item in that.division[data.value]) {
          areaHtml += '<option value="' + item + '">' + item + '</option>'
        }
        $($('form').find('select[name=city]')[0]).html(areaHtml).parent().show()
        $($('form').find('select[name=district]')[0]).html('<option value="">请选择区</option>').parent().show()
        form.render('select')
      })

      form.on('select(city)', function (data) {
        that.userInfo.city = data.value
        let areaHtml = '<option value="">请选择区</option>'
        for (let item in that.division[that.userInfo.province][data.value]) {
          areaHtml += '<option value="' + item + '">' + that.division[that.userInfo.province][data.value][item] + '</option>'
        }
        $($('form').find('select[name=district]')[0]).html(areaHtml).parent().show()
        form.render()
      })

      form.on('select(district)', function (data) {
        that.userInfo.district = that.division[that.userInfo.province][that.userInfo.city][data.value]
        form.render()
      })

      form.on('radio', function (data) {
        that.userInfo.gender = data.value
      })
      form.on('submit', function (data) {
        //   console.log(data)
        //   // layer.msg(JSON.stringify(data.field))
        return false
      })
      form.render()
    })
    that.uploadImg()
  },
  methods: {
    uploadImg () {
      let that = this
      window.layui.use('upload', function () {
        let $ = window.layui.jquery
        let upload = window.layui.upload
        // ------基本信息头像上传-------
        upload.render({
          elem: '#infoUp',
          url: api.uploadUrl,
          headers: {
            accessToken: sessionStorage.getItem('token')
          },
          before: function (obj) {
            // 预读本地文件示例，不支持ie8
            obj.preview(function (index, file, result) {
              $('#basInfoImg').attr('src', result) // 图片链接（base64）
            })
          },
          done: function (res) {
            that.userInfo.avatar = res.data.src
            console.log(that.userInfo.avatar)
          }
        })
      })
    },
    async saveInfo () {
      try {
        await api.modifyUserInfo(this.userInfo)
        window.layer.msg('保存成功！', {
          icon: 1,
          time: 800
        })
        this.$store.dispatch('getUserInfo')
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>
